<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>分析顾客构成</legend>
</fieldset>
   
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">等级划分</li>
        <li>信用度划分</li>
        <li>满意度划分</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div id="main1" style="width: 100%;height:400px;"></div>
        </div>
        <div class="layui-tab-item">
            <div id="main2" style="width: 1000px;height:400px; margin:10px auto"></div>
        </div>
        <div class="layui-tab-item">
            <div id="main3" style="width: 1000px;height:400px; margin:10px auto"></div>
        </div>
    </div>
</div>

<script>
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    
option1 = {
    backgroundColor: '#2c343c',

    title: {
        text: '按等级划分的客户构成',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    visualMap: {
        show: false,
        min: -3,
        max: 10,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 5, name: '直接访问'},
                {value: 10, name: '邮件营销'},
                {value: 18, name: '联盟广告'},
                {value: 13, name: '视频广告'},
                {value: 12, name: '搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                color: 'white'
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

option2 = {
    title: {
        text: '按信用度划分的客户构成',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['一级信用度', '二级信用度', '三级信用度', '四级信用度', '五级信用度']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '一级信用度'},
                {value: 310, name: '二级信用度'},
                {value: 234, name: '三级信用度'},
                {value: 135, name: '四级信用度'},
                {value: 1548, name: '五级信用度'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option3 = {
    title: {
        text: '按满意度划分的客户构成',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'center',
        top: 'bottom',
        data: ['rank1', 'rank2', 'rank3', 'rank4', 'rank5']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '半径模式',
            type: 'pie',
            radius: [20, 110],
            center: ['25%', '50%'],
            roseType: 'radius',
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                {value: 10, name: 'rank1'},
                {value: 5, name: 'rank2'},
                {value: 15, name: 'rank3'},
                {value: 25, name: 'rank4'},
                {value: 20, name: 'rank5'},
            ]
        },
        {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'],
            roseType: 'area',
            data: [
                {value: 10, name: 'rank1'},
                {value: 5, name: 'rank2'},
                {value: 15, name: 'rank3'},
                {value: 25, name: 'rank4'},
                {value: 20, name: 'rank5'},
            ]
        }
    ]
};

layui.use(['element', 'jquery', 'layer'], function(){
    var element = layui.element;
    var $ = layui.jquery;
    var layer = layui.layer;

    $(function() {
        let url = 'http://localhost:8080/customer/getCustomerBySearchInfo';
        getData(url, {searchInfo:'cus_level'}, dealDate, myChart1, option1);
        myChart1.on('click', (param)=>{
            window.key = param.name[0];
            window.search = 0;
            let title = param.name + '详细信息';
            openDateDetail(title);
        })
        myChart2.on('click', (param)=>{
            window.key = param.name[0];
            window.search = 1;
            let title = param.name + '客户详细信息';
            openDateDetail(title);
        })
        myChart3.on('click', (param)=>{
            window.key = '';
            switch (param.name) {
                case '非常不满意':
                    window.key = 1;
                    break;
                case '不满意':
                    window.key = 2;
                    break;
                case '一般':
                    window.key = 3;
                    break;
                case '满意':
                    window.key = 4;
                    break;
                case '非常满意':
                    window.key = 5;
                    break;
            } 
            window.search = 2;
            let title = param.name + '客户详细信息';
            openDateDetail(title);
        })
    })

    // 打开客户详细数据列表
    function openDateDetail(title) {
        layer.open({
                type: 2 //此处以iframe举例
                ,title: title
                ,area: ['450px', '380px']
                ,shade: 0.3 //背景透明度，0是完全透明
                ,maxmin: true  //显示最大化和最小化按钮
                ,offset: [ //窗口位置，居中显示
                ($(window).height()-380)/2
                ,($(window).width()-450)/2
                ] 
                ,content: 'statement/customerByLevel.html' //窗口里面显示的页面
        });
    }
    // 切换tab触发事件
    element.on('tab(docDemoTabBrief)', function(data){
        let url = 'http://localhost:8080/customer/getCustomerBySearchInfo';
        switch (data.index) {
            case 0:
                getData(url, {searchInfo:'cus_level'}, dealDate, myChart1, option1);
                break;
            case 1:
                getData(url, {searchInfo:'cus_credit'}, dealDate2, myChart2, option2, formatCredit);
                break;
            case 2:
                getData(url, {searchInfo:'cus_satisfaction'}, dealDate2, myChart3, option3, formatSatisfied);
                break;
        }
    });
    // 发送ajax请求获取数据
    function getData(url, data, success, myChart, option, format=null) {  // data为根据那个字段进行查询，success为成功的回调函数，option为echars参数
        $.ajax({
            url:url,
            type: 'get',
            dataType: 'json',
            data: data,
            success: function(data) {
                success(data, myChart, option, format);
            }
        })
    }
    // 渲染echars
    function dealDate(data, myChart, option) {
        option.series[0].data = data;
        myChart.setOption(option);
    }

    function dealDate2(data, myChart, option, format) {
        // 重构数据
        let arr = format(data);
        option.legend.data = arr;
        option.series.forEach(item=>{
            item.data = data;
        });
        myChart.setOption(option);
    }

    // 重构信用度数据
    function formatCredit(data) {
        data.forEach(item=>{
            item.name = item.name[0] + '级信用度';
        })
        return ['1级信用度', '2级信用度', '3级信用度', '4级信用度', '5级信用度']
    }

    // 重构满意度数据
    function formatSatisfied(data) {
        data.forEach(item=>{
            switch (item.name[0]) {
                case '1':
                    item.name = '非常不满意';
                    break;
                case '2':
                    item.name = '不满意';
                    break;
                case '3':
                    item.name = '一般';
                    break;
                case '4':
                    item.name = '满意';
                    break;
                case '5':
                    item.name = '非常满意';
                    break;
            }   
        })
        return ['非常满意', '满意', '一般', '不满意', '非常不满意']
    }
    // forEach返回undefined，而且如果类型是值类型不能直接改变数组值
    // let a = [{'name':'长相'}]
    // a.forEach((item,index,arr)=>{
    //     item.name = 'lalalal';
    // })
    // console.log(a)
});

</script>

<!-- 
    refactor:重构
    factor：因素、要素
    factory：工厂
    statistics: 统计学
 -->